<template>
    <div id="barChart"></div>
</template>

<script>
export default {
    data() {
        return {
            myChart: null, // echarts实例载体
        }
    },
    props: ['articlePopularityList','resizeOrNot'],
    watch: {
        articlePopularityList: {
            deep: true,
            handler() {
                this.echartsInit()
            }
        },
        resizeOrNot: {
            handler() {
                this.myChart.resize()
            }
        }
    },
    methods: {
        // 初始化图表
        echartsInit() {
            this.myChart = this.$echarts.init(document.getElementById('barChart'))
            let option = {
                title: {
                    text: '博客人气图',
                    textStyle: {
                        fontSize: '20',
                        color: '#fff'
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.articlePopularityList.chartXData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            rotate: 20, // x轴倾斜
                            interval: 0, // 显示全部x轴数据
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人气',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.articlePopularityList.chartYData
                    }
                ]
            }
            this.myChart.setOption(option)
        },
        // 图表重绘函数
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
    },
    mounted() {
        this.echartsInit() // 初始化图表
    },
}
</script>

<style lang="scss" scoped>
#barChart {
    height: 100%;
    width: 100%;
}
</style>